<template>
  <view class="car">
    <u-cell-group>
      <u-cell-item icon="address" title="是否自提" :arrow="false">
        <u-switch slot="right-icon" v-model="checked"></u-switch>
      </u-cell-item>
      <u-cell-item v-if="!checked && !address.id" icon="address" title="选择地址" @click="toAddress">
      </u-cell-item>
      <u-cell-item v-if="!checked && address.id" icon="address" :title="address.address + '-' + address.code"  @click="toAddress">
        <div slot="label">
          <div class="u-box">
            <span class="name">{{ address.username }}</span>
            <span class="mobile">{{ address.phone }}</span>
          </div>
        </div>
      </u-cell-item>
    </u-cell-group>
    <u-gap heigt="20"></u-gap>
    <div class="car-list">
      <div class="car-item" v-for="item in buyList" :key="item.id">
       <u-image :src="item.image" :width="240" :height="240" mode="aspectFit"></u-image>
        <div class="goods-detail">
          <div class="goods-name">{{ item.name }}</div>
          <div class="goods-price-box">
            <div class="goods-price">{{ item.price }}元</div>
            <div class="goods-count">
              <span class="goods-count-value">x {{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="car-action">
      <div class="total">
        <span>合计：</span>
        <span class="total-value">{{ totalValue }}元</span>
      </div>
      <div>
        <u-button style="width: 100px;margin: 0 auto" type="error" :ripple="true" shape="circle" @click="buyAll">结算</u-button>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
      buyList: [
      ],
      address: {}
    }
  },
  computed: {
    totalValue() {
      return this.buyList.reduce((total, el) => {
        total += el.price * el.count
        return total
      }, 0)
    }
  },
  async onShow() {
    const buyList = uni.getStorageSync('buyList') || []
    this.buyList = buyList
  },
  methods: {
    buyAll() {
      if (this.checked) {
      } else {
        if (!this.address.id) {
          uni.showToast({
            title: '请选择地址',
            icon: 'none'
          })
          return
        }
      }
      this.$api.createOrder({
        address_id: this.checked ?  undefined : this.address.id,
        member_id: uni.getStorageSync('userInfo').id,
        goods: this.buyList.map(el => {
          return {
            id: el.id,
            count: el.count
          }
        })
      }).then(res => {
        uni.showToast({
          title: '下单成功',
          icon: 'success'
        })
        // 将购物车中已结算的商品删除
        const carList = uni.getStorageSync('carList') || []
        const buyList = this.buyList.map(el => el.id)
        uni.setStorageSync('carList', carList.filter(el => !buyList.includes(el.id)))
        uni.removeStorageSync('buyList')
        uni.redirectTo({
          url: '/pages/order/order'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    toAddress() {
      uni.navigateTo({
        url: '/pages/address/address?source=1'
      })
    }
  }
}
</script>

<style lang="scss">
.car {
  background-color: #f7f8fa;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .handle-head {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #dd6161;
    padding: 0 14px;
  }
  .car-list {
    flex-grow: 1;
    overflow: auto;
    .car-item {
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        .goods-name {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: $u-type-error;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 36rpx;
            }
          }
        }
      }
    }
  }
  .car-action {
    flex-shrink: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 14px;
    .car-btn {

    }
    .total {
      color: #000000;
      display: flex;
      align-items: center;
    }
    .total-value {
      color: $u-type-error;
      margin-right: 15px;
    }
  }
}
</style>
